<template>
    <Layout>
        <Form ref="form1" :model="form1" :label-width="120">
            <Row class="query-form" style="padding-top: 15px" v-show="!switchFlag">
                <Col span="8">
                    <FormItem label='单位名称：'>
                        <cascaderDom ref="riskUnit" @setOrgInfo="setRiskUnit" @setOrgname="setRiskUnitName"
                                     :currentOrgId="form1.riskUnit"
                                     :currentOrgName="form1.riskUnitName"
                                     :orgTree="true"></cascaderDom>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="风险源：">
                        <Input type="text" v-model="form1.riskSources"/>
                    </FormItem>
                </Col>

                <Col span="8">
                    <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query()">查询</Button>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form" style="padding-top: 15px">
                <Col span="8">
                    <FormItem label='单位名称：'>
                        <cascaderDom ref="riskUnit1" @setOrgInfo="setRiskUnit" @setOrgname="setRiskUnitName"
                                     :currentOrgId="form1.riskUnit"
                                     :currentOrgName="form1.riskUnitName"
                                     :orgTree="true"></cascaderDom>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="风险源：">
                        <Input type="text" v-model="form1.riskSources"/>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="风险等级：">
                        <!-- <Input type="text" v-model="form1.rikRankId"/>-->
                        <Select v-model="rikRanks" multiple style="width:100%">
                            <Option v-for="item in rikRankList" :value="item" :key="item">{{ item }}</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="24">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight" :loading="loading" size="small" class="no-add-table"
               no-data-text="没有查询到相关数据!"
               highlight-row stripe border :columns="columns1" width="100%" :data="dataTable">
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
                <Page :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
                      style="float: right" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                      show-total show-sizer show-elevator/>
            </Col>
        </Row>

        <Modal :transfer=false v-model="model1" :width=1000>
            <p slot="header">
                <span>环保风险</span>
            </p>
            <Form :model="InputData" label-position="top">
                <div>
                    <environmentalRiskApprovalDetail ref="environmentalRiskApprovalDetail" :model1="model1"
                                                     :InputData="InputData"></environmentalRiskApprovalDetail>
                </div>
                <!--  <Row type="flex" justify="space-around" class="code-row-bg">
                      <Col span="23">
                          <FormItem>
                              <Button class='ivu-btn-save' @click="model3=false">关闭</Button>
                          </FormItem>
                      </Col>
                  </Row>-->
            </Form>
            <div slot="footer">
                <Button class='ivu-btn-save' @click="model1=false">关闭</Button>
            </div>
        </Modal>
    </Layout>
</template>
<script>
    import {Api} from '../../../api/index.js'
    import {sessionStorage} from '../../../common/cacheUtils.js';
    import cascaderDom from '../../../components/cascader-dom.vue';
    import environmentalRiskApprovalDetail from './environmentalRiskApprovalDetail.vue'

    export default {
        components: {environmentalRiskApprovalDetail, cascaderDom},
        name: "riskBase",//风险库
        data() {
            return {
                switchFlag: false,
                rikRankList: ["重大", "较大", "一般", "低"],
                rikRanks: [],
                tableHeight: '', loading: false,
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                },
                dataTable: [],
                columns1: [
                    {
                        title: "序号",
                        width: 80,
                        align: "center",
                        fixed: 'left',
                        render: (h, params) => {
                            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
                        }
                    },
                    {
                        width: 200,
                        minWidth: 150,
                        title: '单位名称',
                        align: 'center',
                        render: (h, params) => {
                            return h('span', params.row.enRiskInfo.riskUnitName)
                        }
                    },
                    {
                        width: 200,
                        minWidth: 150,
                        title: '车间/部门',
                        align: 'center',
                        render: (h, params) => {
                            return h('span', params.row.enRiskInfo.riskUnit2)
                        }
                    },
                    {
                        width: 200,
                        minWidth: 150,
                        title: '发生部位',
                        align: 'center',
                        render: (h, params) => {
                            return h('span', params.row.enRiskInfo.riskUnit3)
                        }
                    }, {
                        width: 200,
                        minWidth: 150,
                        title: '风险源/危险物质',
                        align: 'center',
                        render: (h, params) => {
                            return h('span', params.row.enRiskInfo.riskSources)
                        }
                    }, {
                        width: 200,
                        minWidth: 150,
                        title: '环境危害和途径',
                        align: 'center',
                        render: (h, params) => {
                            return h('span', params.row.enRiskInfo.environmentalHazards)
                        }
                    }, {
                        width: 200,
                        minWidth: 150,
                        title: '可能发生事故事件类型',
                        align: 'center',
                        render: (h, params) => {
                            return h('span', params.row.enRiskInfo.eventType)
                        }
                    },

                    {
                        width: 150,
                        title: '风险等级',
                        align: 'center',
                        key: 'rikRankName',
                    },

                    {
                        width: 150,
                        title: '风险防范措施',
                        align: 'center',
                        key: 'manageMeasure',
                        render: (h, params) => {
                            return h('span', params.row.enRiskManage.manageMeasure)
                        },
                        ellipsis: true
                    },
                    {
                        width: 150,
                        title: '责任部门',
                        align: 'center',
                        key: 'dutyOrgName',
                        render: (h, params) => {
                            return h('span', params.row.enRiskManage.dutyOrgName)
                        }
                    },
                    {
                        width: 150,
                        title: '责任人',
                        align: 'center',
                        key: 'dutyPersonName',
                        render: (h, params) => {
                            return h('span', params.row.enRiskManage.dutyPersonName)
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 140,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                    },
                                    on: {
                                        click: () => {
                                            this.InputData = params.row;
                                            let recordeTime = new Date(params.row.enRiskManage.recordeTime)
                                            this.InputData.enRiskManage.recordeTime = recordeTime.getFullYear() + '-' + (recordeTime.getMonth() + 1) + '-' + recordeTime.getDate()
                                            this.model1 = true;
                                        }
                                    }
                                }, '详情'),
                            ]);
                        }
                    }
                ],
                add: false,
                model1: false,
                InputData: {
                    enRiskInfo: {},
                    enRiskAssess: {},
                    enRiskManage: {},
                    enRiskAduitTransfer: {}
                },
                enRiskAduitTransfer: {},
                form1: {
                    hazardFactor: '',
                    rikRankId: '',
                },
            }
        },
        mounted() {
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.query()
        },
        watch: {
            "model1": function (qw, er) {
                if (qw && this.model1) {

                } else {
                    this.InputData = {
                        enRiskInfo: {},
                        enRiskAssess: {},
                        enRiskManage: {},
                        enRiskAduitTransfer: {}
                    }
                    this.query()
                }
            },
        },
        methods: {
            setRiskUnit(data) {
                this.form1.riskUnit = data[data.length - 1];

            },
            setRiskUnitName(data) {
                this.form1.riskUnitName = data;


            },
            switchQuery(flag) {
                this.switchFlag = flag;
                if (!this.switchFlag) {
                    this.tableHeight = this.tableHeight + 44;
                } else {
                    this.tableHeight = this.tableHeight - 44;
                }
            },
            query() {
                this.loading = true;
                let url = Api.environmentalApprovalList
                let data = {
                    startPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                    auditState: '2'
                }
                this.form1.rikRankId = "";
                for (let i = 0; i < this.rikRanks.length; i++) {
                    this.form1.rikRankId += this.rikRanks[i] + ",";

                }
                this.form1.orgId = sessionStorage('userId').getObject('userId').companyId
                data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));
                this.$http.get(url, {params: data}).then((res) => {
                    console.log(res.data);
                    res.data.data.data.forEach(item => {
                        const sty = item.rikColor == '红' ? 'table-info-cell-red' : item.rikColor == '橙' ? 'table-info-cell-orage' : item.rikColor == '黄' ? 'table-info-cell-yellow' : item.rikColor == '蓝' ? 'table-info-cell-blue' : ''
                        item.cellClassName = {rikRankName: sty}
                    })
                    this.dataTable = res.data.data.data;
                    this.pagedata.total = res.data.data.totalSize;
                    this.loading = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            reset() {
                this.form1 = {}
                this.rikRanks = [];
                this.$refs.riskUnit.resetCurrentOrg();
                this.$refs.riskUnit1.resetCurrentOrg();
                this.pagedata.currentPage=1
                this.query()
            },
            pageChange(pageNum) {
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },

        }
    }
</script>


<style scoped>
    @import '../../../index.css';
</style>
